<!-- 会员码 -->
<template>
	<view class="content" id="app">
		<Header desc="Membership Code" page-name="会员码"/>
		<view class="grid" :style="{'height': `calc(100vh - ${height+20}px)`}">
			<template v-if="isLogin">
				<!-- 会员卡 -->
				<UserCard :info="userData"/>
				<!-- 会员码 -->
				<UserCode :info="userData" @refresh="getMemberInfo()"/>
			</template>
			<view v-else class="show-login">
				<text class="siyuan-medium">请先登录</text>
				<button class="black-btn" @click="openPage('/pages/login/index')">去登录</button>
			</view>
		</view>
		<FooterBar :tab-index="1"/>
	</view>
</template>

<script setup>
	import { onShow } from "@dcloudio/uni-app";
	import { ref,onMounted } from "vue";
	import Header from "@/components/Header/HomeHeader.vue"
	import FooterBar from "@/components/FooterBar/index.vue";
	import UserCard from "./components/UserCard.vue"
	import UserCode from "./components/UserCode.vue"
	import { queryMembercenter, getMemberHomeCode } from "@/server/api.js"
	

	import { useStore } from "vuex";
	const store = useStore();
	let height = ref(store.state.headerHeight);
	let isLogin = ref(getApp().globalData.isLogin);
	let userData = ref({});
	let useCode = ref({});
	
	
	const openPage = path =>{
		uni.navigateTo({
			url: path
		})
	}
	
	function queryMemberInfo(){
		if(store.state.userToken) {
			isLogin.value = true;
			queryMembercenter().then(res=>{
				userData.value = res.data
			})
		}else {
			isLogin.value = false;
			userData.value = {}
		}
	}
	
	function getMemberInfo(){
		if(!useCode.value.memberCodeUpdateTime) {
			getMemberHomeCode().then(res=>{
				useCode.value = res.data
			})
		}
	}
	onShow(()=>{
		queryMemberInfo();
		getMemberInfo()
	})
</script>

<style lang="scss" scoped>
	#app.content {
		padding-bottom: 100px;
	}
	.show-login {
		    position: absolute;
		    top: 50%;
		    left: 50%;
			margin-top: -160rpx;
		    transform: translate(-50%, -50%);
			text-align: center;
			text {
				font-size: 36rpx;
			}
			button {
				width: 232rpx;
				height: 72rpx;
				margin-top: 30rpx;
				line-height: 72rpx;
			}
	}

</style>
